<template>
  <pro-dialog ref="addFielModal" width="824" :nopadding="true" title="新增字段">
    <div class="modal-tpl" style="padding: 6px 24px 24px">
      <YsForm class="add-form" label-position="top" ref="addTpFrom" :rules="ruleValidate" :model="fieldInfo" inline>
        <YsRow :gutter="16">

          <YsCol span="12">
            <YsFormItem label="字段" prop="field_name">
              <YsInput type="text"  :class="curTheme" class="input-border" size="large" :maxlength="15" v-model.trim="fieldInfo.field_name" placeholder="请输入字段">
              </YsInput>
            </YsFormItem>
          </YsCol>
          <YsCol span="12">
            <YsFormItem label="编码" prop="field_code">
              <YsInput type="text"  :class="curTheme" class="input-border" size="large" :maxlength="15" v-model.trim="fieldInfo.field_code" placeholder="请输入编码">
              </YsInput>
            </YsFormItem>
          </YsCol>
        </YsRow>
        <YsRow>
          <YsCol span="24">
            <YsFormItem label="字段类型" prop="field_type">
              <Select size="large" transfer clearable class="search-box select-border" v-model="fieldInfo.field_type" placeholder="请选择字段类型">
                <Option v-for="(item, index) in fieldTypeList" :value="item.id" :key="index" :label="item.label"></Option>
              </Select>
            </YsFormItem>
          </YsCol>
        </YsRow>
        <YsRow>
          <YsCol span="24">
            <YsFormItem label="备注">
              <YsInput v-model="fieldInfo.remark"  :class="curTheme" class="input-border" show-word-limit type="textarea" maxlength="30" placeholder="请输入" :autosize="{ minRows: 4, maxRows: 5 }"></YsInput>
            </YsFormItem>
          </YsCol>
        </YsRow>
        <YsRow class="foot-btn" style="margin-top: 4px">
          <YsButton size="large" @click="$refs.addFielModal.close()">取消</YsButton>
          <YsButton size="large" @click="submitTpClick('addTpFrom')" type="primary">确定</YsButton>
        </YsRow>
      </YsForm>
    </div>
  </pro-dialog>
</template>
<script>
import {mapState, mapActions } from "vuex";
export default {
  name: 'addTpl',
  data() {
    return {
      fieldTypeList: [
        { id: 1, label: "文本" },
        { id: 2, label: "数值" }
      ],
      curField: null,
      fieldInfo: {
        field_code: "",
        field_name: "",
        field_type: null,
        remark: ""
      },
      ruleValidate: {
        field_name: [
          { required: true, message: '请输入字段', trigger: 'blur' }
        ],
        field_code: [
          { required: true, message: '请输入编码', trigger: 'blur' }
        ],
        field_type: [
          { required: true, message: '请选择字段类型', type: 'number', trigger: 'change' }
        ]
      },
    }
  },
  computed: {
    ...mapState(['curTheme']),
  },
  methods: {
    ...mapActions(['addFieldAPI', "editFieldAPI"]),
    //提交新增
    submitTpClick(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.curField) {
            this.exitFieldFn()
          } else {
            this.addFieldFn()
          }
        }
      })
    },
    // 新增
    addFieldFn() {
      this.addFieldAPI({ fieldInfo: this.fieldInfo }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.$YsMessage.success(data.message_text);
          this.$parent.getFielList(true)
          this.$refs.addFielModal.close()
        } else {
          this.$YsMessage.error(msg);
        }
      }).catch(err => {
        this.page.tableLoad = false
        this.$YsMessage.error('新增失败');
      })
    },
    // 编辑
    exitFieldFn() {
      this.editFieldAPI({ fieldInfo: this.fieldInfo }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.$YsMessage.success(data.message_text);
          this.$parent.getFielList(true)
          this.$refs.addFielModal.close()
        } else {
          this.$YsMessage.error(msg);
        }
      }).catch(err => {
        this.page.tableLoad = false
        this.$YsMessage.error('编辑失败');
      })
    },
    //打开弹出
    openFielModal(item) {
      if (item) {
        this.curField = item
        this.fieldInfo.field_code = item.field_code
        this.fieldInfo.field_name = item.field_name
        this.fieldInfo.field_type = item.field_type
        this.fieldInfo.remark = item.remark
        this.fieldInfo.id = item.id
      } else {
        this.curField = null
        this.fieldInfo = this.$options.data().fieldInfo
      }
      this.$refs.addFielModal.show()
    },
    //设置选择内容
    getFieldItem(item) {
      this.fieldInfo.field_type = item.field_type
    }
  }
}
</script>

<style scoped lang='less'>
.modal-tpl {
  /deep/.ivu-form-item {
    width: 100%;
    margin-bottom: 24px;
    .ivu-input-word-count {
      top: initial;
      bottom: 10px;
    }
  }
  .foot-btn {
    /deep/ .ivu-btn {
      min-width: 96px !important;
    }
  }

  
}

/deep/ .ivu-modal-header {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /deep/ .ivu-modal-close {
    right: 18px;
  }

  /deep/ .theme-blue.input-border {
  textarea {

    border: 1px solid #566582 !important;
  }

  input {
    border: 1px solid #566582 !important;
  }
}
</style>